<template>
	<view>
		<commonHeader :title="$t('oit1')"></commonHeader>
		<view class="gHeadbox"></view>
		<view class="box">
			<view class="box_top">
				<view class="addtxt">
					{{maskAddress(teamDetailVo.address)}}
				</view>
				<view class="tebom d_f_around">
					<view class="tebom_txt">
						<view class="tebom_txt_n hidden-text">
							{{$t('oit2')}}
						</view>
						<view class="">
							{{teamDetailVo.teamTotal}}
						</view>
					</view>
					<view class="langm">

					</view>
					<view class="tebom_txt">
						<view class="tebom_txt_n hidden-text">
							{{$t('oit3')}}
						</view>
						<view class="">
							{{teamDetailVo.zindexTotal}}
						</view>
					</view>
				</view>
			</view>
			<view class="box_ctab d_f_between">

				<view :class="type==1?'box_ctab_item item_active':'box_ctab_item'" @click="type=1">
					<image src="@/static/img/sqqs.png" mode=""></image>
					<text class="hidden-text">{{$t('oit4')}}</text>
				</view>
				<view :class="type==2?'box_ctab_item item_active':'box_ctab_item'" @click="type=2">
					<image src="@/static/img/sqqs.png" mode=""></image>
					<text class="hidden-text">{{$t('oit5')}}</text>
				</view>
			</view>
			<view class="box_list">
				<view class="" v-if="type==1">

					<u-empty v-if="teamList.length<=0" mode="data" icon="data" :text="$t('oit6')" iconSize="200"
						textSize="28" marginTop="80"></u-empty>
					<view class="listbg" v-for="(item,index) in teamList" :key="index" v-if="type==1"
						@click="toitemadd(item)">
						<view class="d_f_between">
							<text>{{maskAddress(item.address)}}</text>
							<text v-if="item.level==0">{{$t('oit7')}}</text>
							<text v-else>VIP{{item.level}}</text>
						</view>
						<view class="langbg">

						</view>
						<view class="d_f_around txtcon">
							<view class="">
								<view class="">
									{{$t('oit8')}}
								</view>
								<view class="mb">
									{{item.teamTotal}}
								</view>
							</view>
							<view class="bombglag">

							</view>
							<view class="">
								<view class="">
									{{$t('oit9')}}
								</view>
								<view class="mb">
									{{item.teamCount}}
								</view>
							</view>
						</view>
					</view>

				</view>
				<view class="" v-if="type==2">
					<u-empty v-if="zindexList.length<=0" mode="data" icon="data" :text="$t('oit10')" iconSize="200"
						textSize="28" marginTop="80"></u-empty>
					<view class="listbg" v-for="(item,index) in zindexList" :key="index" v-if="type==2"
						@click="toitemadd(item)">
						<view class="d_f_between">
							<text>{{maskAddress(item.address)}}</text>

							<text v-if="item.level==0">{{$t('oit7')}}</text>
							<text v-else>vip{{item.level}}</text>
						</view>
						<view class="langbg">

						</view>
						<view class="d_f_around txtcon">
							<view class="">
								<view class="">
									{{$t('oit11')}}
								</view>
								<view class="mb">
									{{item.zindexTotal}}
								</view>
							</view>
							<view class="bombglag">

							</view>
							<view class="">
								<view class="">
									{{$t('oit12')}}
								</view>
								<view class="mb">
									{{item.zindexCount}}
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		teams
	} from '@/api/home.js'
	export default {
		data() {
			return {
				type: 1,
				lisyt: '', //数据
				teamDetailVo: '',
				teamList: [],
				zindexList: [],
			}
		},
		onLoad: function(option) { //option为object类型，会序列化上个页面传递的参数
			console.log(option.ads); //打印出上个页面传递的参数。
			if (option.ads) {
				this.fncontent(option.ads)
			} else {
				this.fncontent()
			}
		},
		methods: {
			toitemadd(item) {
				this.fncontent(item.address)
			},
			fncontent(ads) {
				var params = {
					address: ads ? ads : this.$store.state.devAddress
				}
				teams(params).then(res => {
					if (res.code == 200) {
						console.log(res)
						this.lisyt = res.data
						this.teamDetailVo = res.data.teamDetailVo
						this.teamList = this.lisyt.teamList
						this.zindexList = this.lisyt.zindexList
					}

				})
			},
			maskAddress(address) {
				if (!address) return;
				return address.substr(0, 4) + "****" + address.substr(-4);
			},
		}

	}
</script>

<style scoped lang="scss">
	.box {
		padding: 30rpx;
		box-sizing: border-box;
		height: 100%;

		.box_top {
			margin-bottom: 40rpx;
			background: url("@/static/img/sqcbocx.png") no-repeat;
			background-size: 100% 100%;
			padding: 40rpx 60rpx 30rpx;
			box-sizing: border-box;
			height: 286rpx;
			width: 100%;
			position: relative;

			.addtxt {
				color: #ffffff;
				font-size: 40rpx;
				font-weight: 500;
				text-align: center;
				margin-bottom: 30rpx;
			}

			.tebom {
				text-align: center;

				.langm {
					width: 4rpx;
					height: 128rpx;
					border-radius: 10000rpx;
					opacity: 1;
					background: linear-gradient(180deg, #c4c4c400 0%, #c4c4c482 56.99999999999999%, #c4c4c400 100%);
				}

				.tebom_txt {
					color: #ffffff;
					font-size: 32rpx;
					font-weight: 400;
					width: 50%;

					.tebom_txt_n {
						font-size: 38rpx;
						font-weight: 700;
						margin-bottom: 16rpx;

					}
				}
			}

			&::before {
				/* 1 */
				height: 286rpx;
				width: 100%;
				display: block;
				content: '';
				z-index: 0;
				border-radius: 22rpx;
				border: 2rpx solid transparent;
				background: linear-gradient(90deg, #aec9e9, transparent 100%) border-box;
				/* 2 */
				-webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
				/* 3 */
				-webkit-mask-composite: xor;
				/* 4 */
				mask-composite: exclude;
				position: absolute;
				top: 0;
				left: 0;
			}

		}

		.box_ctab {
			margin-bottom: 40rpx;

			.box_ctab_item {
				height: 90rpx;
				line-height: 90rpx;
				text-align: center;
				border-radius: 22rpx;
				background: #ca00ff1c;
				opacity: 1;
				color: #ffffff;
				font-size: 38rpx;
				font-weight: 700;
				flex: 1;
				position: relative;
				display: flex;
				align-items: center;
				padding: 0 20rpx;

				text {
					width: 80%;
					display: inline-block;
				}

				image {
					width: 26rpx;
					height: 26rpx;
					margin-right: 20rpx;
				}

				&::before {
					/* 1 */
					height: 90rpx;
					width: 100%;
					display: block;
					content: '';
					z-index: 0;
					border-radius: 22rpx;
					border: 2rpx solid transparent;
					box-sizing: border-box;
					background: linear-gradient(90deg, #aec9e9, transparent 100%) border-box;
					/* 2 */
					-webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
					/* 3 */
					-webkit-mask-composite: xor;
					/* 4 */
					mask-composite: exclude;
					position: absolute;
					top: 0;
					left: 0;
				}
			}

			.box_ctab_item:nth-child(2) {
				margin-left: 30rpx;
			}

			.item_active {
				background: linear-gradient(137deg, #65008275 0%, #ca00ff73 97%, #cc00ff00 100%);
				box-shadow: 0 6rpx 24rpx 0 #ffe8904a;
			}
		}

		.box_list {
			.listbg {
				width: 100%;
				background: #cc00ff3b;
				backdrop-filter: blur(8px);
				position: relative;
				padding: 40rpx 60rpx 10rpx;
				box-sizing: border-box;
				margin: 0 auto 30rpx;
				text-align: center;

				&::before {
					/* 1 */
					display: block;
					content: '';
					border-radius: 32rpx 0;
					border: 2rpx solid transparent;
					background: linear-gradient(190deg, #aec9e9, transparent 100%) border-box;
					/* 2 */
					-webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
					/* 3 */
					-webkit-mask-composite: xor;
					/* 4 */
					mask-composite: exclude;
					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
					height: 100%;
				}

				.langbg {
					width: 100%;
					height: 2rpx;
					opacity: 1;
					backdrop-filter: blur(8px);
					background: linear-gradient(190deg, #cc00ff3b 0%, #ffffff 40%, #ffffff 70%, #cc00ff3b 100%) border-box;
					text-align: center;
					margin: 14rpx auto;
				}

				.txtcon {
					text-align: center;
					font-size: 30rpx;

					.bombglag {
						width: 4rpx;
						height: 90rpx;
						border-radius: 10000rpx;
						opacity: 1;
						background: linear-gradient(180deg, #c4c4c400 0%, #c4c4c482 56.99999999999999%, #c4c4c400 100%);
					}

					.mb {
						margin-top: 8rpx;
					}
				}
			}
		}
	}
</style>